<template>
  <div class="app-container">
    <!-- 顶部信息栏 -->
    <header class="header-bar" v-if="showHeader">
      <!-- 应用名称 -->
      <div class="app-title">
        <span class="title-text" :style="{ fontSize: spanFontSize + 'px' }">{{ appName }}</span>
        <span class="title-tag" v-if="showTag">{{ appNameTag }}</span>
      </div>
      <!-- 右侧状态区 -->
      <div class="status-bar">
        <!-- 时间显示 -->
        <div class="time-display" v-if="showTag">
          <span class="date">{{ currentDate }}</span>
          <span class="time">{{ currentTime }}</span>
        </div>

        <!-- 登录状态 -->
        <div class="user-status">
          <div class="user-info">
            <el-dropdown style="color: aquamarine;font-size: 15px;" v-if="userName">
              <span class="el-dropdown-link">
                欢迎您&nbsp;{{ userName }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="toManagePage">后台管理</el-dropdown-item>
                  <el-dropdown-item @click="userInfo">个人信息</el-dropdown-item>
                  <el-dropdown-item @click="resetPassword">修改密码</el-dropdown-item>
                  <el-dropdown-item @click="LoginOut">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-button @click="login" v-if="!userName"
              style="color: #00ff9d; background-color:transparent;font-size: 14px;display: flex;align-items: center;white-space: nowrap;text-decoration: none">登录</el-button>
          </div>
        </div>
      </div>
    </header>
    <el-dialog v-model="userInfoDislog" title="用户信息" :draggable="true">
      <el-descriptions :column="2" :border="true" label-width="200px">
        <el-descriptions-item label="用户名" width="35%">
          {{ userName }}
        </el-descriptions-item>
        <el-descriptions-item label="电话" width="35%">
          {{ phone }}
        </el-descriptions-item>
        <el-descriptions-item label="邮箱" width="35%">
          {{ email }}
        </el-descriptions-item>
        <el-descriptions-item label="角色" width="35%">
          {{ roleName }}
        </el-descriptions-item>

      </el-descriptions>
      <el-descriptions :column="1" :border="true" label-width="200px">
        <el-descriptions-item label="注册时间" width="85%">
          {{ dateTime }}
        </el-descriptions-item>
        <el-descriptions-item label="园区" width="85%">
          {{ parkName }}
        </el-descriptions-item>
      </el-descriptions>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="userInfoDislog = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <ResetPasswordDialog ref="resetPasswordRef" />

    <main class="main-content">
      <router-view />
    </main>
  </div>
</template>
<script>
import auth from '@/components/utils/auth';
import request from '@/api/request';
import ResetPasswordDialog from './ResetPassowrd.vue';

// 获取路由实例
export default {
  // 注册组件
  components: {
    ResetPasswordDialog
  },
  data() {
    return {
      // appName: '贵州理工学院孵化园',
      appName: '数字园区管理系统',
      appNameTag: '数字园区管理系统',
      userName: '',
      phone: '',
      email: '',
      roleName: '',
      dateTime: '',
      parkName: '',
      currentDate: '',
      currentTime: '',
      timeTimer: null,
      showTag: true,
      spanFontSize: 24,
      showHeader: false,
      userInfoDislog: false//个人信息弹框
    }
  },
  // 2. 提供修改 showHeader 的方法（子组件可通过 inject 获取）
  provide() {
    return {
      // 提供一个方法，允许子组件修改父组件的 showHeader
      setShowHeader: (value) => {
        this.showHeader = value; // this 指向父组件实例
      },
    };
  },
  methods: {
    formatDateTime() {
      const now = new Date();
      // 日期格式：2025年06月15日 星期六
      this.currentDate = now.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        weekday: 'long'
      }).replace(/\//g, '年').replace(/(\s\d+)/, '月$1日');

      // 时间格式：14:30:25
      this.currentTime = now.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
    },
    toManagePage() {
      // 添加一个小的延迟，确保当前组件清理完成
      setTimeout(() => {
        this.$router.push("/IndexManage");
      }, 50);
    },
    userInfo() {
      //个人信息
      this.userInfoDislog = true
    },
    login() {
      this.$router.push('/login');
    },
    LoginOut() {
      // 可以添加确认提示
      this.$confirm('确定要退出登录吗？', '提示', {
        lockScroll: false, // 关键配置：不锁定滚动条
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        auth.clearUserInfo()
        // 退出成功后跳转到登录页
        // this.$router.push('/login');
        // 刷新页面或重置应用状态
        window.location.reload();
      }).catch(() => {
        // 用户取消退出
        // this.$message({
        //   type: 'info',
        //   message: '已取消退出'
        // });
      });
    },

    resetPassword() {
      //重置密码
      // 打开重置密码弹框
      // 通过 ref 调用子组件的 open 方法
      this.$refs.resetPasswordRef.open();
    },
    // 防抖函数，避免resize事件频繁触发
    debounce(func, delay = 100) {
      let timer = null
      return function () {
        clearTimeout(timer)
        timer = setTimeout(() => {
          func.apply(this, arguments)
        }, delay)
      }
    },

    // 根据屏幕宽度设置不同的值
    setValuesByScreenSize() {
      this.screenWidth = window.innerWidth

      // 根据屏幕宽度范围设置不同的值
      if (this.screenWidth < 576) {
        // 超小屏幕（手机）
        this.spanFontSize = 16
        this.showTag = false
      } else if (this.screenWidth < 768) {
        // 小屏幕（平板竖屏）
        this.spanFontSize = 16
        this.showTag = false
      } else if (this.screenWidth < 992) {
        // 中等屏幕（平板横屏）
        this.showTag = true
        this.spanFontSize = 18
      } else {
        // 大屏幕（桌面）
        this.showTag = true
        this.spanFontSize = 24
      }

      // 可以在这里添加其他需要动态设置的逻辑
      console.log('屏幕尺寸变化，已更新参数值')
    }
  },
  created() {
    const userInfo = auth.getUserInfo()
    if (userInfo) {
      this.phone = userInfo.phone == null ? '' : userInfo.phone
      this.dateTime = userInfo.dateTime == null ? '' : userInfo.dateTime
      this.email = userInfo.email == null ? '' : userInfo.email
      if (userInfo.roles.length > 0) {
        this.roleName = userInfo.roles.map(item => {
          return item.roleName
        })
      }
      this.userName = userInfo.username
      request.get('user/getParkInfos', {
        params: {
          userId: userInfo.id
        }
      }).then(res => {
        if (res.success) {
          const parkInfos = res.data
          if (parkInfos.length > 0) {
            this.parkName = parkInfos.map(item => {
              return item.name
            })
          }
        }
      })
    }
  },
  mounted() {
    this.formatDateTime();
    // 启动定时器，注意这里要用this引用方法
    this.timeTimer = setInterval(() => {
      this.formatDateTime();  // 使用箭头函数保持this上下文
    }, 1000);

    // 初始化设置
    this.setValuesByScreenSize()

    // 绑定防抖处理后的resize事件
    this.resizeHandler = this.debounce(this.setValuesByScreenSize)
    window.addEventListener('resize', this.resizeHandler)

  },
  beforeUnmount() {
    // 移除事件监听，防止内存泄漏
    window.removeEventListener('resize', this.resizeHandler)

    clearInterval(this.timeTimer);
    // 移除事件监听
    document.removeEventListener('fullscreenchange', () => {
      this.isFullscreen = !!document.fullscreenElement;
    });

    document.removeEventListener('click', () => {
      this.moreOptionsVisible = false;
    });
  },
}
</script>
<style lang="css">
.app-container {
  height: 100vh;
  /* 最小高度为视口高度 */
  /* 确保容器占满整个视口高度 */
  display: flex;
  flex-direction: column;
  /* 垂直排列 */
}

/* 顶部信息栏*/
.header-bar {
  /* margin-top: 70px; */
  height: 70px;
  background: linear-gradient(to right, #1e2a4a, #0f172a);
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 100;
}

.main-content {
  flex: 1;
  /* 占据剩余空间 */
  overflow: hidden;
  /* 内容超出时可滚动 */
}

.app-title {
  display: flex;
  align-items: center;
  gap: 12px;

  .title-text {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
  }

  .title-tag {
    font-size: 14px;
    color: #94a3b8;
    background-color: rgba(59, 130, 246, 0.1);
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.3);
  }
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 30px;
}

.time-display {
  display: flex;
  gap: 15px;
  color: #e2e8f0;

  .date {
    font-size: 16px;
    color: #94a3b8;
  }

  .time {
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
  }
}
</style>